<template>
	<!-- 退款&评价 详情 -->
	<view class="bg-white" style="min-height: 100vh;">
		<view class="head">
			<view class="main">
				<view v-for="(item,index) in goods.goods" :key="index" class="item flex">
					<image :src="url+item.main_image" mode=""></image>
					<view class="text_div">
						<view class="name flex-cb ">
							<text class="text">{{item.title}} {{item.spec_item_name}}</text>
							<text class="tuikuan" v-if="index == isshow">{{goods.status==0?'待支付':goods.status==1?'待配送':goods.status==2?'配送中':goods.status==3?'已完成（待评价）'
							:goods.status==4?'退款中':goods.status==5?'退款完成':goods.status==7?'已评价':goods.status==-1?'已取消':'拒绝退款'}}</text>
						</view>
						<view class="pic flex justify-between">
							<text class="">原价:￥{{item.price}}</text>
							<text class="jifen">积分最多抵扣￥{{goods.point_amount}}</text>
						</view>
						<view class="numbar flex-cb">
							<text class="num_x">X{{item.number}}</text>
							<text>会员价:￥{{item.vip_price}}</text>
						</view>
					</view>
				</view>
				<view class="solid"></view>
				<view class="span flex justify-between">
					<view class="">
						<view class="text_span ">积分最多抵扣：￥{{goods.point_amount}}</view>
						<view class="text_span">商品数量：{{num}}</view>
						<view class="text_span">总价：￥{{goods.amount}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 退款 -->
		<view class="foot bg-white" v-if="tuikuan == 1">
			<view class="title flex-cb">
				<text>申请类型</text>
				<view class="flex-cb" @click="handleModel">
					<text>{{typelist[ischeck].name}}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="title flex-cb">
				<text>退款说明</text>
				<input type="text" placeholder="选填，请先和商家协商一致" v-model="content" placeholder-class="color:#999999;" >
			</view>
			<view class="title flex-cb">
				<text>退款金额</text>
				<text style="color: #FF2E2E;" v-if="typelist[ischeck].name == '仅退款' ||typelist[ischeck].name == '退货退款'">￥{{max}}</text>
				<view style="text-align: right;"  v-else >
					<input type="digit" v-model="money" :placeholder="'最高可退￥'+max" maxlength="8" />
				</view>
			</view>
			<view class="title flex-cb">
				<text>照片</text>
			</view>
			<view class="image flex">
				<view class="img flex-c" v-if="imgList.length == 0">
					<image src="/static/pageA/xc.png" mode=""  @click="ChooseImage(2)" ></image>
				</view>
				<view class="img img_div flex-c" v-for="(item,i) in imgList" :key="i" v-else>
					<image :src="item.tempFilePath" mode="" @click="detele(0)"></image>
				</view>
				<!--  -->
			</view>
			<view class="button_tj flex-c" @click="TJ">提交</view>
		</view>
		<!-- 退款弹窗 -->
		<view class="modal_view type" v-if="isshow">
			<view class="type_div">
				<view class="title">申请类型</view>
				<view class="type_list">
					<view v-for="(item,index) in typelist" :key="index" class="item flex-cb" @click="ischeck = index">
						<text>{{item.name}}</text>
						<text class="cuIcon-roundcheckfill" v-if="ischeck == index"></text>
						<text class="cuIcon-round" v-else ></text>
					</view>
				</view>
				<view class="button flex-c">
					<view class="flex-c" @click="isshow = 0">确定</view>
				</view>
			</view>
		</view>
		<!--  评价-->
		<view class="pj foot bg-white" v-if="tuikuan == 0">
				<view class="pj_text">评价</view>
			<view class=" pj_wujiao">
				<view style="font-size: 40rpx;">
					<text v-for="(item,index) in wjx" :key="index" :class="item.name" @click="handlewjx(index+1)"></text>
				</view>
			</view>
			<textarea class="pj_text2" v-model="content" placeholder="商品满足您的期待吗？聊一聊您的使用心得，分享给想买的他们吧" maxlength="200" />
			<view class="img flex ">
				<view class="image_div" v-for="(i,j) in imgList" :key="j" style="border: none;">
					<image :src="i.tempFilePath" mode="" v-if="i.fileType=='image'" @click="tx" @longtap="detele(j)"></image>
					<video :src="i.tempFilePath" v-if="i.fileType=='video'" :poster="i.thumbTempFilePath" controls="true" @click="tx" @longtap="detele(j)"></video>
				</view>
				<view class="image_div flex-c" @click="ChooseImage(0)" v-if="isone">
					<text class="cuIcon-add"></text>
				</view>
				<!-- <view class="image_div flex-c" @click="ChooseImage(1)" v-if="video">
					<text class="cuIcon-add"></text>
				</view> -->
			</view>
			<!-- ，一个视频（视频文件不大于50m） -->
			<view class="pj_text3">最多选择3张图片</view>
			<view class="button flex-c" @click="handleFB">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				wjx:[
					{
						name:'cuIcon-favor'
					},
					{
						name:'cuIcon-favor'
					},
					{
						name:'cuIcon-favor'
					},
					{
						name:'cuIcon-favor'
					},
					{
						name:'cuIcon-favor'
					}
				],//五角星评价
				wjxpj:0,
				content:'',//评价内容 || 退款内容
				tuikuan:0,
				isshow:0,
				ischeck:0,//退款选择
				typelist:['退货退款','仅退款','协商退款','部分退款'],
				imgList: [],
				video:1,
				img:[],
				isone:1,//是否可以继续上传图片
				is_zt:0,
				goods:null,
				good_id:null,
				num:null,
				money:'',
				max:0.00
			};
		},
		onLoad(e) {
			console.log(e);
			this.url = this.$base
			this.tuikuan = e.tuikuan
			this.is_zt = e.zt
			this.good_id = e.id
			this.getgoods(this.good_id)
			this.$api.refund_types({},this.good_id,1).then(res=>{
				console.log(res);
				this.typelist = res.data
			})
		},
		methods:{
			handlewjx(i){//处理星级评价
				this.wjxpj = i
				for (let k = 0; k < 5; k++) {
					this.wjx[k].name = 'cuIcon-favor'
				}
				for (let j = 0; j < i; j++) {
					this.wjx[j].name = 'cuIcon-favorfill'
				}
				
			},
			handleModel(){
				this.isshow = 1
			},
			getgoods(id){
				this.$api.self_pick_list_details({},id,1).then(res=>{
					console.log(res);
					this.goods = res.data
					for (let i = 0; i < res.data.goods.length; i++) {
						this.num += this.goods.goods[i].number
					}
					if(this.goods.discount_method == 0){
						this.max = parseFloat(this.goods.amount)+parseFloat(this.goods.express_fee)
					}
					if(this.goods.discount_method == 1){
						this.max = parseFloat(this.goods.amount)+parseFloat(this.goods.express_fee)-parseFloat(this.goods.need_point)
					}else{
						this.max = parseFloat(this.goods.vip_amount)+parseFloat(this.goods.express_fee)
					}
					this.money = this.max
				})
			},
			handleFB(){
				if(this.tuikuan ==0){//评价
					this.pj()
				}
			},
			ChooseImage(i){
				if(i==0){
					uni.chooseMedia({
						count:3,
						mediaType:'image',
						success:(res)=> {
							console.log(res)
							this.imgList = [...this.imgList,...res.tempFiles]
							uni.showLoading({
								title: '正在上传',
								mask: true
							});
							this.isone = 0
							for (let i = 0; i < this.imgList.length; i++) {
								this.$api.upImage(this.imgList[i].tempFilePath).then(Res => {
									if(Res){
										this.img.push(Res) 
									}
								});
							}
							uni.hideLoading();
						}
					})
				}else if(i == 1){
					uni.chooseMedia({
						count:1,
						mediaType:'video',
						success:(res)=> {
							console.log(res.tempFiles)
							if(res.tempFiles.size/1024/1024 >= 50){
								uni.showToast({
									icon:"none",title:'请上传50M以内的视频'
								})
							}
							this.imgList = [...this.imgList,...res.tempFiles]
							this.video = 0
							uni.showLoading({
								title: '正在上传',
								mask: true
							});
							this.$api.upImage(res.tempFiles[0].tempFilePath).then(Res => {
								if(Res){
									this.img.push(Res)
								}
							});
							uni.hideLoading();
						}
					})
				}else{
					uni.chooseMedia({
						count:1,
						mediaType:'image',
						success:(res)=> {
							console.log(res)
							this.imgList = [...this.imgList,...res.tempFiles]
							uni.showLoading({
								title: '正在上传',
								mask: true
							});
							this.isone = 0
							for (let i = 0; i < this.imgList.length; i++) {
								this.$api.upImage(this.imgList[i].tempFilePath).then(Res => {
									if(Res){
										this.img.push(Res) 
									}
								});
							}
							uni.hideLoading();
						}
					})
				}
			},
			detele(j){//取消图片||视频
				this.imgList.splice(j,1)
				this.img.splice(j,1)
				if(this.imgList.length == 0) this.isone=1
			},
			TJ(){
				if(this.money == ''){
					uni.showToast({
						icon:"none",title:'输入价格不能为空'
					})
					return
				}
				if(!this.$utils.Money(this.money)){
					uni.showToast({
						icon:"none",title:'输入价格有误，请重试'
					})
					return
				}
				this.$api.orders_refund({
					refund_type_id:this.typelist[this.ischeck].id,
					refund_amount:this.money,
					refund_instruction:this.content,
					image:this.img[0]
				},this.good_id,1).then(res=>{
					uni.showToast({
						icon:"none",title:'提交成功'
					})
					uni.navigateBack({
						delta: 1,
						
					})
				})
			},
			pj(){
				if(this.wjxpj == 0){
					uni.showToast({
						icon:"none",title:'请选择星级'
					})
					return
				}
				if(this.content == ''){
					uni.showToast({
						icon:"none",title:'请输入评语'
					})
					return
				}
				if(this.img.length == 0){
					uni.showToast({
						icon:"none",title:'请上传图片或视频'
					})
					return
				}
				this.$api.order_comment({
					content:this.content,
					star:this.wjxpj,
					files:this.img,
				},this.good_id,1).then(res=>{
					if(res.code == 200001){
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			tx(){
				uni.showToast({
					icon:"none",title:'长按取消该视频或图片'
				})
			}
		}
	}
</script>

<style lang="scss">
.head{
	width: 100%;
	background: #F8F8F8;
	padding: 10rpx 0;
}
.pj_wujiao{
	margin-bottom: 20rpx;
}
.cuIcon-favorfill{
	color: #FF6F10;
}
.main{
	width: 706rpx;
	height: auto;
	background: #fff;
	border-radius: 20rpx;
	padding: 26rpx 0;
	margin: auto;
	margin-bottom: 23rpx;
	.item{
		margin-bottom: 61rpx;
		padding: 0 20rpx 0 27rpx;
		image{
			width: 136rpx;
			height: 136rpx;
		}
		.text_div{
			flex: 1;
			margin-left: 19rpx;
			font-size: 28rpx;
			color: #333333;
			.name{
				height: 40rpx;
				.text{
					height: 40rpx;
					font-weight: bold;
				}
				.tuikuan{
					font-size: 30rpx;
					font-weight: 500;
					color: #1CD699;
				}
			}
			.pic{
				height: 40rpx;
				margin-top: 20rpx;
				.jifen{
					color: #FF6F10;
					font-size: 24rpx;
				}
			}
			.numbar{
				text{
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF2E2E;
				}
				.num_x{
					font-size: 30rpx;
					font-weight: 500;
					color: #999;
				}
			}
		}
	}

	.span{
		padding-top: 24rpx;
		.text_span{
			font-size: 30rpx;
			color: #666;
			padding: 0 25rpx;
			margin-bottom: 20rpx;
		}
		image{
			width: 189rpx;height: 189rpx;
			margin-right: 15rpx;
		}
	}
	
}
.foot{
	width: 100%;
	height: 754rpx;
	padding:29rpx 30rpx;
	font-size: 30rpx;
	font-weight: bold;
	.title{
		margin-bottom: 34rpx;
		input{
			flex: 1;
			margin-left: 20rpx;
			font-size: 26rpx;
		}
	}
	.image{
		.img{
			width: 158rpx;
			height: 158rpx;
			background: #F9F9F9;
			box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.09);
			border-radius: 10rpx;
			image{
				width: 86rpx;
				height: 86rpx;
			}
		}
		.img_div{
			position: relative;
			margin-right: 20rpx;
			image{
				width: 100%;height: 100%;
			}
			text{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
	}
	
}
.button_tj{
		width: 630rpx;
		height: 88rpx;
		background: #1CD699;
		border-radius: 44rpx;
		margin: auto;
		margin-top: 132rpx;
		color: #fff;
		font-size: 34rpx;
		font-weight: bold;
		
	}
.solid{
	width: 690rpx;
	margin: 0 8rpx;
	
}
.type{
	z-index: 333;
	.type_div{
		width: 750rpx;
		height: 655rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		position: fixed;
		left: 0;
		bottom: 0;
		color: #333;
		.title{
			height: 119rpx;
			font-size: 34rpx;
			font-weight: bold;
			border-bottom: 1px solid #F2F2F2;
			text-align: center;
			line-height: 119rpx;
		}
		.type_list{
			font-size: 30rpx;
			margin-top: 51rpx;
			padding: 0 30rpx;
			.item{
				margin-top: 43rpx;
				.cuIcon-roundcheckfill{
					color: #1CD699;
					font-size: 40rpx;
				}
				.cuIcon-round{
					color: #CCCCCC;
					font-size: 40rpx;
				}
			}
		}
		.button{
			width: 100%;
			height: 105rpx;
			border-top: 1px solid #F2F2F2;
			color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			font-size: 36rpx;
			view{
				width: 690rpx;
				height: 74rpx;
				background: #1CD699;
				border-radius: 37rpx;
			}
		}
	}
	
}
.pj{
	.pj_text{
		margin-bottom: 30rpx;
	}
	.pj_text2{
		width: 676rpx;
		height: 210rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 46rpx;
		padding-bottom: 20rpx;
	}
	.img{
		.image_div{
			border: 1px dashed #CCCCCC;
			width: 160rpx;height: 160rpx;
			margin-right: 20rpx;
			image,video{
				width: 100%;height: 100%;
			}
			.cuIcon-add{
				font-size: 40rpx;
				color: #999;
			}
		}
	}
	.pj_text3{
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #C3C3C3;
		line-height: 46rpx;
		margin-top: 14rpx;
	}
	.button{
		width: 630rpx;
		height: 88rpx;
		background: #1CD699;
		border-radius: 44rpx;
		color: #fff;
		font-size: 34rpx;
		font-weight: bold;
		margin: auto;
		margin-top: 94rpx;
	}
}
</style>
